<template>
    <div class="padding_box">
        <div class="top_box">
            <div class="page-title font-weight-500">首页
            </div>
        </div>
        <el-row :gutter="24">
            <el-col :span="12"
                    :xs="24"
                    :sm="12"
                    :md="12"
                    :lg="12"
                    :xl="12">
                <el-card shadow="hover">
                    <p class="u-flex u-row-between"><span class="top-card-title">学生总数</span> <span class="top-card-title2">单位：人</span></p>
                    <div class="top-card-footer u-flex u-row-between">
                        <img class="top-card-img"
                             src="@/assets/img/home/sy_icon_yhzs@2x.png">
                        <div class="progress-box u-flex-col u-row-center "
                             style="flex:unset; ">
                            {{ memberAndUserData.students || 0 }}
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12"
                    :xs="24"
                    :sm="12"
                    :md="12"
                    :lg="12"
                    :xl="12">
                <el-card shadow="hover">
                    <p class="u-flex u-row-between"><span class="top-card-title">报名总数</span> <span class="top-card-title2">单位：人</span></p>
                    <div class="top-card-footer u-flex u-row-between">
                        <img class="top-card-img"
                             src="@/assets/img/home/sy_icon_sjzs@2x.png">
                        <div class="progress-box u-flex-col u-row-center "
                             style="flex:unset;">
                            {{ memberAndUserData.orders || 0 }}
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="24">

            <el-col :span="12"
                    :xs="24"
                    :sm="12"
                    :md="12"
                    :lg="12"
                    :xl="12">
                <el-card shadow="hover">
                    <p class="u-flex u-row-between"><span class="top-card-title">兴趣班课程</span><span class="top-card-title2">单位：个</span></p>
                    <div class="top-card-footer u-flex u-row-between">
                        <img class="top-card-img"
                             src="@/assets/img/home/sy_icon_ddsl@2x.png">
                        <div class="progress-box u-flex-col u-row-center "
                             style="flex:unset;">
                            {{ memberAndUserData.classSchedules || 0 }}
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12"
                    :xs="24"
                    :sm="12"
                    :md="12"
                    :lg="12"
                    :xl="12">
                <el-card shadow="hover">
                    <p class="u-flex u-row-between"><span class="top-card-title">请假教师待审批</span> <span class="top-card-title2">单位：个</span></p>
                    <div class="top-card-footer u-flex u-row-between">
                        <img class="top-card-img"
                             src="@/assets/img/home/sy_icon_ddsl@2x.png">
                        <div class="progress-box u-flex-col u-row-center "
                             style="flex:unset;">
                            {{ memberAndUserData.leaveTearchers || 0  }}
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- <el-row :gutter="24">
            <el-col :span="24"
                    :xs="24"
                    :sm="24"
                    :md="24"
                    :lg="24"
                    :xl="24">
                <el-card shadow="hover">
                    <div class="u-flex u-col-center u-row-between">
                        <span class="top-card-title">各课程总报名量 <span class="top-card-title2">单位：人</span></span>

                    </div>
                    <div id="lineAndBarChart"
                         v-loading="loading"
                         style="width:100%;height:420px"></div>
                </el-card>
            </el-col>

        </el-row> -->
    </div>
</template>

<script>
import axios from '@/utils/axios.js';
var mytheme = require('@/utils/echarts/macarons.json')
import * as echarts from 'echarts';

export default {
    name: 'dashboard',
    data() {
        return {
            loading: true,
            lineAndBarChart: '',
            memberAndUserData: {

            },
            // 折线+柱状图
            lineAndBarOptions: {
                grid: {
                    right: '0',
                    left: '5%',
                    bottom: '25',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    right: '0',
                    top: '20',
                    data: []
                },
                xAxis: {
                    type: 'category',
                    // data: ['手动压缩', '私密空间', '互利共享', '功能设置']
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        type: 'bar',
                        name: "",
                        smooth: true,
                        emphasis: {
                            focus: 'series',
                            blurScope: 'coordinateSystem'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#1890FF' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#ffffff' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        data: []
                    },
                ]

            },
            queryData: {
                week: '周一',
                pageNum: 1,
                pageSize: 10,
            },
        }
    },
    components: {
    },
    filters: {

    },
    watch: {

    },
    computed: {

    },
    created() {
        let _this = this
        // this.getCompressData()
        setTimeout(() => {
            // _this.getResidenceTimeData()
        }, 1000);
        // this.getTableData()
        this.getHomePage()
    },
    mounted() {
        let _this = this
        // window.onresize = () => {
        //     clearTimeout(this.timer)
        //     this.timer = setTimeout(() => {
        //         _this.lineAndBarChart && _this.lineAndBarChart.resize();
        //     }, 300)
        // };
    },
    activated() {

    },
    deactivated() {

    },
    methods: {
        // getTableData() {
        //     var _this = this;
        //     this.loading = true
        //     axios({
        //         url: "/admin/classSchedule/listPageByClass",
        //         method: "post",
        //         data: this.queryData,
        //     }).then(res => {
        //         if (res.code == 0) {
        //             _this.tableData = res.data.list;
        //             _this.pageTotal = res.data.total;
        //         }
        //         this.loading = false;
        //     }).catch(err => {
        //         this.loading = false;
        //     })
        // },
        getResidenceTimeData() {
            // axios({
            //     url: "/statistics/residenceStatisticsDate",
            //     method: "post"
            // }).then(result => {
            //     if (result.code == 0) {
            //         this.lineAndBarChart = echarts.init(document.getElementById('lineAndBarChart'), mytheme);
            //         // console.log('----------------------', this.lineAndBarChart)
            //         let Xdata = []
            //         let Ydata1 = []
            //         //折线图
            //         result.result.list.forEach(ele => {
            //             let name = this.XnameFilter(ele.type)
            //             console.log('----------------------', name)
            //             Xdata.push(name)
            //             Ydata1.push(ele.residenceTime)
            //         });
            //         //折线、柱形图

            //         // this.lineAndBarOptions.xAxis.data = Xdata
            //         // this.lineAndBarOptions.series[0].data = Ydata1
            //         this.lineAndBarOptions.xAxis.data = ['跆拳道', '篮球', '少儿编程', '书法', '羽毛球', '乒乓球', '足球', '漫画', '金话筒主持人']
            //         this.lineAndBarOptions.series[0].data = [300, 285, 400, 185, 600, 361, 364, 469, 423]
            //         // this.lineAndBarOptions.series[1].data = Ydata2
            //         this.lineAndBarChart.setOption(this.lineAndBarOptions)
            //     } else {
            //         this.$message.error(result.errMsg);
            //     }
            //     this.loading = false
            // }).catch(err => {
            //     this.loading = false
            // })
            // this.lineAndBarChart = echarts.init(document.getElementById('lineAndBarChart'), mytheme);
            // this.lineAndBarOptions.xAxis.data = ['跆拳道', '篮球', '少儿编程', '书法', '羽毛球', '乒乓球', '足球', '漫画', '金话筒主持人']
            // this.lineAndBarOptions.series[0].data = [300, 285, 400, 185, 600, 361, 364, 469, 423]
            // this.lineAndBarChart.setOption(this.lineAndBarOptions)
            // this.loading = false
        },
        getCompressData() {
            // axios({
            //     url: "/statistics/generalization",
            //     method: "post"
            // }).then(result => {
            //     if (result.code == 0) {
            //         this.memberAndUserData = result.result
            //     } else {
            //         this.$message.error(result.errMsg);

            //     }
            // })
        },
        getHomePage() {
            axios({
                url: "/admin/order/homePage",
                method: "post",
            }).then(result => {
                if (result.code == 0) {
                    this.memberAndUserData = result.data
                }
            }).catch(err => {
            })
        },
        getSchoolList() {
            var _this = this;
            axios({
                url: "/admin/school/list",
                method: "post",
            }).then(result => {
                if (result.code == 0) {
                    console.log(">>>>>>>>", result)
                    let list = result.data.filter(item => item.schoolId != '0');
                    _this.allSchoolList = list
                }
            }).catch(err => {
            })
        },
    }
};
</script>


<style lang="scss" scoped>
.top_box {
    // margin-bottom: 15px;
}

.top-card-title {
    font-size: 16px;
    color: #333;
    font-weight: 600;
}
.top-card-title2 {
    margin-left: 10px;
    font-size: 12px;
    color: #999;
}
.top-card-footer {
    margin-top: 25px;
    .top-card-img {
        margin-right: 15px;
        width: 56px;
        height: 56px;
    }
    .progress-box {
        font-size: 20px;
        color: #333;
        font-weight: bold;
        flex: 1;
        p {
            font-size: 14px;
            color: #333;
            margin: 3px 0;
            span:nth-of-type(2) {
                float: right;
            }
        }
        p:nth-of-type(2) {
            margin-top: 10px;
        }
    }
}
.circle-progress-box {
    padding: 45px 0;
    border-bottom: 1px solid #eeeeee;
}
.footer-text {
    padding-top: 15px;
    font-size: 14px;
    color: #999;
    text-align: center;
}
::v-deep {
    .el-card {
        border: 0;
        min-height: 155px;
        border-radius: 16px;
        max-height: 500px;
    }
    .el-card__body {
        padding: 15px 20px;
    }
    .consume-progress {
        .el-progress__text {
            color: #1890ff;
        }
    }
    .extension-progress {
        .el-progress__text {
            color: #2fc25b;
        }
    }
    .fund-progress {
        .el-progress__text {
            color: #6d5aff;
        }
    }
}
.progress-box2 {
    padding-bottom: 20px;
    border-bottom: 0;
}
.fenyong_text {
    margin: 10px 0;
    color: #1b93f8;
    font-size: 14px;
}
.fenyong_text2 {
    color: #999;
    font-size: 14px;
}
.el-col {
    margin-top: 25px;
}
</style>
